<template>
	<view class="serve-detail">
		<!-- 自定义navbar -->
		<!-- <navBar></navBar> -->
		<scroll-view class="tab-scroll-sticky">
			<!-- 轮播banner -->
			<view class="sde-banner">
				<image class="w" style="height: 530rpx;" :src="group_detail.image" mode="aspectFill"></image>
			</view>
			<view class="sde-price h120 pl40 pr35" style="overflow: hidden;">
				<view class="dis_flex mt16 tf">
					<view class="fz24 ">拼团价：</view>
					<view class="fz26">距团购活动还剩</view>
				</view>
				<view class="dis_flex tf">
					<view class="dis_f">
						<view class="fz50 fw">￥{{group_detail.price}}</view>
						<view class="fz24 ml16" style="color: rgba(255, 255, 255, 0.5);"><del>￥{{group_detail.crossed_price}}</del></view>
						<view class="tuan_border w88 h34 fz24 dis_f jc tf ml30">{{group_detail.num}}人团</view>
					</view>
					<view class="dis_f fz26">
						<uni-countdown :font-size="11" :hour="date_list.hours" :minute="date_list.minutes" :second="date_list.seconds" color="#F14537" background-color="#fFF" />
					</view>
				</view>
			</view>
			<view class="sde-spec pt24 pb40 bac_f">
				<view class="spec-que">
					<view class="que ml30 w206 lh56 dis_f radius6" style="background-color: #FFF3F3;">
						<image class="w28 ml24" src="/static/image/spec-que.png" mode="widthFix"></image>
						<text class="ml12 fz24" style="color: #FE3A3A;">满200减75</text>
					</view>
				</view>
				<view class="spec-h1 ml30 mt24 fz34 fw">
					<text>{{group_detail.name}}</text>
					<!-- <text>【家庭保洁】</text> -->
				</view>
				<view class="spec-h2 fz26 tf_999 ml30 mt16"><text>{{group_detail.s_name}}</text></view>
				<view class="spec-line mt40 ml30 mr30" style="background-color: #E7E7E7; height: 2rpx;;"></view>
				<view class="spec-spec mt28">
					<view class="spec-info dis_flex pl30">
						<view class="">
							<text class="fz26 tf_999">规格</text>
							<text class="fz26 tf22 ml20 fw">已选:&nbsp;&nbsp;{{group_detail.gg_name}}</text>
						</view>
						<view class="mr30 dis_f" @click="choseSpec">
							<text class="fz26" style="color: #F14537;">更换</text>
							<image class="w16 ml16" src="/static/image/spec-jiantou.png" mode="widthFix"></image>
						</view>
					</view>
					<view class="fz24 tf_999 bac_f7 radius4 lh32 mt18 ml102 pl15 pr15 w166">共{{spec_num}}种规格可选</view>
				</view>
			</view>
			<view class="pl30 pr30 pt34 bac_f mt24">
				<view class="dis_flex">
					<view class="fw fz32 tf_22">立即拼团</view>
					<view class="mr30 dis_f">
						<text class="fz26 tf_999" @click="goAllGroup">查看全部</text>
						<image class="w16 ml16" src="/static/image/spec-jiantou.png" mode="widthFix"></image>
					</view>
				</view>
				<view v-if="Lj_list" class="mt40 dis_flex pb30" style="border-bottom: 1px solid #E7E7E7;" v-for="(item,index) in Lj_list" :key="index">
					<view class="dis_f">
						<image class="w88 h88 radius501" :src="item.user.avatar" mode="aspectFill"></image>
						<view class="ml24">
							<view class="dis_f">
								<view class="fz28 fw">{{item.user.nickname}}</view>
								<view class="fz22 ml24 dis_f jc h40 radius4"
									style="background-color: #FFF0F2;width: 74rpx;color: #FD395C;">差{{item.group_purchase.num}}人</view>
							</view>
							<view class="fz28 tf_999">剩余 23:41:28</view>
						</view>
					</view>
					<view class="border4537 radius8 fz24 w120 dis_f jc tf_4537" style="height: 58rpx;" @click="joinGroup(item)">去拼团</view>
				</view>
			</view>
			<view class="mt24 bac_f fw tf_4537 w dfd_c ac pt30">
				商品详情
				<view class="w120" style="margin-top: 26rpx;">
					<u-gap height="2" bgColor="#F14537"></u-gap>
				</view>
			</view>
			<view  class="sde-content">
				<view class="mt20" v-for="(v, i) in group_detail.content_images" :key="i">
					<image class="w" :src="v" mode="widthFix"></image>
				</view>
			</view>
			<view class="w h200">
				
			</view>
		</scroll-view>
		<view class="bac_f sde-footer dis_f padding24  p_f" style="width: 100%;">
			<button class="dfd_c ac ml18 bac_f" open-type="contact">
				<image class="" src="../../../static/image/spec-kf.png" mode="aspectFill" class="w40 h40"></image>
				<text class="fz22 mt10">客服</text>
			</button>
			<view class="dfd_c ac ml46">
				<image src="/static/image/spec-cart.png" mode="aspectFill" class="w40 h40"></image>
				<text class="fz22 mt10">收藏</text>
			</view>
			<view class="radius8 w220 h88 tf43 border11 fz32 dis_f jc ml40" style="box-sizing: border-box;">分享</view>
			<view class="col-th radius8 w240 h88 tf fz32 dis_f jc ml24" @click="createGroup">立即参团</view>
		</view>
		<!-- 弹出窗 -->
		<u-popup :show="popshow" mode="bottom" @close="popshow=false">
			<view class="pop-cart radius_5">
				<view class="pop-title dis_f radius_5 jc bac11" style="height: 98rpx;">
					<text class="fz34 tf33 ml238">服务内容</text>
					<image @click="popshow=false" class="w44 ml238" src="/static/image/server_close.png" mode="widthFix">
					</image>
				</view>
				<view class="bac_f padding30 bz w" style="padding-bottom: 0;">
					<view class="dis_f ac js">
						<image :src="group_detail.image" mode="aspectFill" class="w156 h156 radius12 mr28">
						</image>
						<view class="fz26">
							<view class="fz32 tf_222 fw">{{group_detail.name}}</view>
							<view class="tf_999 pt5 pb20">{{group_detail.s_name}}</view>
							<view class="dis_f ac">
								<view class="tf1 fz36 fw">¥{{group_detail.price}}</view>
								<view class="tf pl15 pr15 pt5 pb5 fz24 radius50 ml24"
									style="background: linear-gradient(90deg, #FF8253 0%, #E5413E 100%);">券后¥{{group_detail.crossed_price}}</view>
							</view>
						</view>
					</view>
					<view class="fw fz28 tf_222 mt40 mb20">请选择商品</view>
					<scroll-view scroll-y="true" class="dis_f js ac fww" style="max-height: 520rpx;">
						<view v-if="spec_list" class="fz28 pl30 mt10 pr30 pt20 pb20 bac_f8 mr20 radius6 border_f8 bz ib" v-for="(v, i) in spec_list" :key="i" @click="selectSpec(i)" :class="{ active: serve_id == v.id }">
							<text>{{ v.gg_name }}</text></view>
					</scroll-view>
					<view class="w h136 bac_f dis_f ac mt48" @click="popshow=false">
						<view class="w690 lh88 tf fz32 tac auto col-th radius8">确认</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { groupDetail,groupSpecNum,groupSpecList,groupLjList,getGroupTime,createGroup,joinGroup } from "@/config/api.js";
	export default {
		data() {
			return {
				date_list:null,
				serve_content:[],//内容图片
				Lj_list:[],
				crossed_price:'',//原价
				gg_image:'',//规格img
				serve_content:[],//内容img
				serve_id:'',//服务id
				spec_list:[],//规格列表
				cur_pirce:'',//当前价格
				cur_spec:'',//当前规格
				spec_num:'',//规格数量
				group_detail:[],
				popshow: false,
				xincount: '5',
				xinscore: '4',
				tab_list: [{
					name: '服务内容'
				}]
			};
		},
		onLoad(options){
			this.serve_id = options.id
			this.getGroupDetail()
			this.getSpecNum()
			this.LjGroup()
			this.getGroupTime()
		},
		methods: {
			//去拼团
			joinGroup(e){
				joinGroup({id:this.serve_id,uid:e.uid}).then(res=>{
					console.log(res);
					uni.navigateTo({
						url:'../mineGroup/mineGroup'
					})
				})
			},
			//创建拼团
			createGroup(){
				createGroup({id:this.serve_id}).then(res=>{
					console.log(res);
					uni.navigateTo({
						url:'../mineGroup/mineGroup'
					})
				})
			},
			//获取拼团时间
			getGroupTime(){
				getGroupTime({id:this.serve_id}).then(res=>{
					console.log('时间',res);
					this.date_list = res
				})
			},
			//跳转全部参团
			goAllGroup(){
				uni.navigateTo({
					url:'../../groupBooking/groupList/groupList?id='+this.serve_id
				})
			},
			//立即拼团
			LjGroup(){
				groupLjList({id:this.serve_id}).then(res=>{
					this.Lj_list = res
				})
			},
			//选择规格
			selectSpec(i){
				this.serve_id = this.spec_list[i].id;
				console.log(this.serve_id);
				groupDetail({
					id: this.serve_id
				}).then((res) => {
					console.log(res);
					this.group_detail = res
				});
			},
			//获取规格数量
			getSpecNum(){
				groupSpecNum({id:this.serve_id}).then(res=>{
					console.log(res);
					this.spec_num = res
				})
			},
			//更换规格,获取规格列表
			choseSpec(){
				this.popshow = true
				groupSpecList({id:this.serve_id}).then(res=>{
					console.log(res);
					this.spec_list=res
				})
			},
			//获取拼团详情信息
			getGroupDetail(){
				groupDetail({id:this.serve_id}).then(res=>{
					console.log(res);
					this.group_detail = res
					console.log(res.content_images);
				})
			}
		}
	};
</script>

<style lang="scss">
	button::after{
	 	border: none;
	}
	button{
		position: relative;
		display: block;
		margin-left: 0;
		margin-right: 0;
		padding-left: 0px;
		padding-right: 0px;
		box-sizing: border-box;
		// font-size: 18px;
		text-align: center;
		text-decoration: none;
		// line-height: 1;
		line-height: 1.35;
		// border-radius: 5px;
		-webkit-tap-highlight-color: transparent;
		overflow: hidden;
		color: #000000;
		background-color: #fff;
		}
	.active {
		border: 1px solid #f14537;
		background-color: rgba(241, 69, 55, 0.05);
		color: #f14537;
	}
	page {
		background-color: #f8f8f8;
	}

	.tuan_border {
		background-image: url(@/static/image/border.png);
		background-size: cover;
	}

	.serve-detail {
		.tab-scroll-sticky {
			.sde-price {
				background-image: url('https://hmj-test-oss.oss-cn-beijing.aliyuncs.com/uploads/20221014/05ce73c902a2997412d5a2066f0aada2.jpg');
				background-size: cover;
			}

			.sde-evaluate {
				.evaluate-info {
					text {
						display: -webkit-box;
						word-break: break-all;
						/*换行规则*/
						text-overflow: ellipsis;
						/*最后使用省略号显示*/
						overflow: hidden;
						/*超出部分隐藏*/
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						/*能够显示几行*/
					}
				}
			}
		}
	}
</style>
